<template>
  <!-- 第一个盒子 -->
  <view class="box" v-if="type.length !== 0">
    <!-- 条件项 -->
    <view class="shift-item" >{{name}}</view>
    <!-- 条件内容 -->
    <view class="shift-item-condition" >
      <view class="condition-item" v-for="item in type" :key="item.dictCode" :class="{active: currentIndex == item.dictCode}" @click="pickCondition" :id="item.dictCode">
        {{item.dictValue}}
      </view>
    </view>
    </view>
   </view>
</template>

<script>
  import dict from '../../dict/dict.js'
  export default {
    name:"",
    props:['type','name'],
    data(){
      return {
        // 这应该是一组对象
        currentIndex:0,
        dict:dict,
        newName:this.name
      }
    }
    ,methods:{
      // 遍历字典展示,没完成
      showName(v){
       let dict1 = this.dict.conditiondict
       let result = ''
       dict1.map((item) => {
         item.value = v
         result = item.label
       })
       return result
      },
      // 选择条件
      pickCondition(e){
        console.log(e);
        this.currentIndex = e.target.id
        // 这里应向父级传递什么？请求参数需要什么样的数据格式，一个对象，属性，值
        this.$emit('pick',this.newName,e.target.id)
      },
     
      
    }
  }
</script>

<style>
  /* 每单独一个盒子的样式 */
  .box{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 10px;
    margin-right: 10px;
  }
  .shift-item{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
  }
  .shift-item-condition{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .condition-item{
    box-sizing: border-box;
    width: 33.33%;
    background-color: #fff;
    text-align: center;
    line-height: 100%;
    height: 20px;
  }
  /* 激活样式 */
  .active{
    border: 1px solid blue;
    background-color: #fff;
  }
</style>